<template>
  <el-container class="all">
    <el-header><Header /></el-header>
    <el-main>
      <div class="main">
        <div class="main2">
          <el-card>
            <div class="view">
              <div class="img">
                <el-avatar :size="70" :src="user.avatar" />
              </div>
              <ul>
                <li>
                  <h4 id="articleNum">{{ articleCount }}</h4>
                  <h2>文章</h2>
                </li>
                <li>
                  <h4>{{ qaCount }}</h4>
                  <h2>回答</h2>
                </li>
                <li>
                  <h4>{{ creditCount }}</h4>
                  <h2>获赞</h2>
                </li>
                <li>
                  <h4>{{ userCollectionsCount }}</h4>
                  <h2>收藏</h2>
                </li>
              </ul>
            </div>
            <div class="desc">
              <ul>
                <li>
                  <i class="el-icon-s-grid" style="color:#B42B36" />
                  {{ user.username }}
                </li>
                <li>
                  <i class="el-icon-location" style="color: #409EFF" />
                  {{ user.address }}
                </li>
                <li v-show="user.isConsultant === 1">
                  <i class="iconfont icon-xingxing" style="color:#FF8B70" />
                  心理咨询师
                </li>
                <li v-show="user.isConsultant === 1">
                  <el-tooltip class="item" effect="dark" content="擅长领域" placement="bottom-start">
                    <i class="iconfont icon-shanchanghangye" style="color:#67C23A" />
                  </el-tooltip>
                  <span v-for="skill in user.skills" :key="skill" style="font-size:12px;font-weight:bold">{{ skill }} </span>
                </li>
              </ul>
            </div>
            <div class="foot">
              <div v-if="user_id+'' !== this.$route.params.id" class="btns">
                <el-button v-if="isFocus === true && user_id !== ''" @click="focus">已关注</el-button>
                <el-button v-else @click="focus">关注</el-button>
                <el-button @click="gotoWhisper">私信</el-button>
              </div>
            </div>
          </el-card>
          <el-card class="jg-nav">
            <el-tabs v-model="activeName">
              <el-tab-pane label="文章" name="first">
                <ul v-if="myArticle.length > 0">
                  <li v-for="article in myArticle" :key="article.article.id" class="my_article">
                    <router-link target="_blank" :to="{name: 'ArticleDetail', params: { id: article.article.id }}">
                      <el-image class="article_cover" :src="article.article.cover" />
                    </router-link>
                    <div class="text">
                      <div class="title">
                        <router-link target="_blank" :to="{name: 'ArticleDetail', params: { id: article.article.id }}">
                          {{ article.article.title.slice(0,30) }}
                        </router-link>
                      </div>
                      <div class="attr">
                        <dl>
                          <dd>
                            <a class="iconfont icon-chakan">{{ article.readCount }}</a>
                          </dd>
                          <dd>
                            <a class="iconfont icon-dianzan">{{ article.likeCount }}</a>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty v-else description="暂无内容" />
              </el-tab-pane>
              <el-tab-pane label="回答" name="second">
                <ul v-if="myQaList.length > 0">
                  <li v-for="myQa in myQaList" :key="myQa.id" class="my_qa">
                    <h2>
                      <router-link target="_blank" :to="{name: 'QuestionDetail', params: { id: myQa.questionId }}">
                        {{ myQa.questionTitle }}
                      </router-link>
                    </h2>
                    <div class="desc_qa">
                      <div class="digg">
                        <i class="iconfont icon-dianzan" style="display:block" />
                        {{ myQa.usefulCount }}
                      </div>
                      <div class="qaAnswer" v-html="myQa.qaContent" />
                    </div>
                  </li>
                </ul>
                <el-empty v-else description="暂无内容" />
              </el-tab-pane>
              <el-tab-pane label="收藏" name="third">
                <ul v-if="myCollections.length > 0">
                  <li v-for="article in myCollections" :key="article.article.id" class="my_article">
                    <router-link target="_blank" :to="{name: 'ArticleDetail', params: { id: article.article.id }}">
                      <el-image class="article_cover" :src="article.article.cover" />
                    </router-link>
                    <div class="text">
                      <div class="title">
                        <router-link target="_blank" :to="{name: 'ArticleDetail', params: { id: article.article.id }}">
                          {{ article.article.title.slice(0,30) }}
                        </router-link>
                      </div>
                      <div class="attr">
                        <dl>
                          <dd>
                            <a class="iconfont icon-chakan">{{ article.readCount }}</a>
                          </dd>
                          <dd>
                            <a class="iconfont icon-dianzan">{{ article.likeCount }}</a>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty v-else description="暂无内容" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </div>
    </el-main>
    <el-footer><Footer /></el-footer>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
import { findUserById, countAuthorsArticles, getMyCollection, collectionCount, getCreditToCount,
  focus, cancelFocus, isFocused } from '@/api/user'
import { myArticles } from '@/api/article'
import { findQaByUserId, userQaCount } from '@/api/question'
import { mapGetters } from 'vuex'
import Footer from '../foot/foot.vue'
export default {
  components: { Header, Footer },
  data() {
    return {
      articleCount: '',
      qaCount: '',
      userCollectionsCount: '',
      creditCount: '',
      activeName: 'first',
      user: '',
      myArticle: [],
      myQaList: [],
      myCollections: [],
      isFocus: Boolean
    }
  },
  computed: {
    ...mapGetters([
      'user_id'
    ])
  },
  mounted() {
    this.countAuthorsArticles()
    this.userQaCount()
    this.collectionCount()
    this.getCreditToCount()
    this.isFocused()
    this.getUserById()
    this.myArticles()
    this.findQaByUserId()
    this.getMyCollection()
  },
  methods: {
    countAuthorsArticles() {
      countAuthorsArticles({ id: this.$route.params.id }).then(res => {
        this.articleCount = res.data
      })
    },
    getUserById() {
      findUserById({ id: this.$route.params.id }).then(res => {
        this.user = res.data
      })
    },
    myArticles() {
      myArticles({ userId: this.$route.params.id }).then(res => {
        this.myArticle = res.data
      })
    },
    findQaByUserId() {
      findQaByUserId({ userId: this.$route.params.id }).then(res => {
        this.myQaList = res.data
      })
    },
    getMyCollection() {
      getMyCollection({ userId: this.$route.params.id }).then(res => {
        this.myCollections = res.data
      })
    },
    userQaCount() {
      userQaCount({ userId: this.$route.params.id }).then(res => {
        this.qaCount = res.data
      })
    },
    collectionCount() {
      collectionCount({ userId: this.$route.params.id }).then(res => {
        this.userCollectionsCount = res.data
      })
    },
    getCreditToCount() {
      getCreditToCount({ userId: this.$route.params.id }).then(res => {
        this.creditCount = res.data
      })
    },
    isFocused() {
      isFocused({ userId: this.user_id, authorId: this.$route.params.id }).then(res => {
        this.isFocus = res.data
      })
    },
    focus() {
      if (this.isFocus) {
        cancelFocus({ userId: this.user_id, authorId: this.$route.params.id }).then(res => {
          this.isFocus = !this.isFocus
          this.$notify({
            type: 'success',
            title: '成功',
            message: '取消关注'
          })
        })
      } else {
        focus({ userId: this.user_id, authorId: this.$route.params.id }).then(res => {
          this.isFocus = !this.isFocus
          this.$notify({
            type: 'success',
            title: '成功',
            message: '关注成功'
          })
        })
      }
    },
    gotoWhisper() {
      localStorage.setItem('toUserId', this.$route.params.id)
      localStorage.setItem('name', this.user.username)
      this.$router.push('/whisper/myChats')
    }
  }
}
</script>

<style lang="scss" scoped>
.all{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.el-header {
  padding: 0;
}
.el-main{
    background: #eeeeee;
    // width: 970px;
    // margin: 30px auto 0;
    // clear: both;
    // height: 93vh;
    overflow: hidden;
}
.el-footer {
  padding: 0;
}
.main2 {
  width: 645px;
  margin: 30px auto 0;
  height: auto;
}
.view {
    width: 280px;
    float: left;
    display: inline;
    text-align: center;
    height: 180px;
}
.view ul {
    margin: 20px auto 0;
    height: auto;
    overflow: hidden;
    li{
      width: 20%;
      float: left;
      display: inline;
      height: 70px;
      line-height: 1;
      font-size: 14px;
      #articleNum {
        // line-height: 1.5;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      h2{
        font-size: 14px;
      }
    }
}
.desc {
    width: 280px;
    float: right;
    display: inline;
    font-size: 14px;
    line-height: 23px;
    height: 180px;
    ul{
      list-style: none;
    }
    li {
      position: relative;
      padding-left: 20px;
      height: 25px;
      line-height: 25px;
      font-size: 16px;
      margin-bottom: 10px;
      i {
        // position: absolute;
        // top: 0;
        // left: 0;
        margin-right: 8px;
      }
    }
}
.foot{
    clear: both;
    height: auto;
    overflow: hidden;
    .btns{
      text-align: center;
      width: 280px;
      float: left;
      display: inline;
    }
}
.jg-nav {
    margin-top: 20px;
    padding-left: 40px;
    ul {
      list-style: none;
      padding: 0;
    }
}
.article_cover {
  width: 156px;
  height: 104px;
  // display: inline;
  // display: block;
}
.article_cover :hover {
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
.my_article{
    height: auto;
    overflow: hidden;
    margin-bottom: 30px;
}
.text {
    width: 394px;
    float: right;
    display: inline;
    .title {
      font-size: 14px;
      margin-top: 10px;
      line-height: 24px;
      overflow: hidden;
    }
}
.attr {
    height: auto;
    overflow: hidden;
    margin-top: 20px;
    color: #999;
}
.attr dl {
    display: inline;
    text-align: left;
    dd {
      display: inline;
      margin-right: 10px;
      a {
        color: #999;
        padding-left: 20px;
      }
    }
}
.my_qa {
    border-bottom: #efefef solid 1px;
    // padding-top: 15px;
    padding-bottom: 25px;
    h2 a {
      color: #3169b0;
      font-size: 14px;
      font-weight: 400;
    }
}
.desc_qa{
    padding-left: 55px;
    position: relative;
    margin-top: 10px;
    height: 70px;
    overflow: hidden;
    .digg {
      position: absolute;
      left: 0;
      top: 0;
      width: 38px;
      height: 38px;
      background: #f2f2f2;
      overflow: hidden;
      text-align: center;
    }
}
.qaAnswer{
    font-size: 14px;
    p{
      margin: 0;
      padding: 0;
    }
}
@font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.eot?t=1651894818047'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.eot?t=1651894818047#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.woff2?t=1651894818047') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.woff?t=1651894818047') format('woff'),
       url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.ttf?t=1651894818047') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_bo7wsd32x7a.svg?t=1651894818047#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shanchanghangye:before {
  content: "\e648";
}

.icon-xingxing:before {
  content: "\e870";
}

.icon-jubao:before {
  content: "\e618";
}

.icon-shenqing:before {
  content: "\e675";
}

.icon-yiguanzhu:before {
  content: "\e612";
}

.icon-huifu:before {
  content: "\e655";
}

.icon-jiaguanzhu:before {
  content: "\e60b";
}

.icon-tuijian:before {
  content: "\e6ec";
}

.icon-a-xingbietouxiang:before {
  content: "\e763";
}

.icon-biaoqian:before {
  content: "\e67e";
}

.icon-zhishiwenda:before {
  content: "\e636";
}

.icon-chakan:before {
  content: "\e628";
}

.icon-quxiaoshoucang:before {
  content: "\e8c2";
}

.icon-shoucang:before {
  content: "\e8c3";
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}

</style>
